<template>
  <div class="app-container">
    <!-- <div style="display: flex; flex-direction: row">
      <div style="margin-left: 60px">
        <el-select v-model="projectStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div> -->
    <el-checkbox-group v-model="colOptions" style="margin:5px;">
      <el-checkbox
        v-for="item in colSelect"
        :key="item"
        :label="item"
      />
    </el-checkbox-group>

    <el-table
      ref="tableDataRef"
      :data="projectList"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'desce nding' }"
    >
      <!-- <el-table-column
        align="center"
        prop="id"
        label="ID"
        width="40"
        v-if="colData[0].istrue"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column> -->

      <el-table-column
        v-if="colData[0].istrue"
        min-width="250px"
        label="项目名称"
        prop="project_name"
        :show-overflow-tooltip="true"
        align="center"
      />

      <el-table-column
        v-if="colData[1].istrue"
        width="120px"
        prop="bid_open_time"
        align="center"
        label="开标时间"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.bid_open_time | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[2].istrue"
        width="150px"
        align="center"
        prop="business_director"
        :show-overflow-tooltip="true"
        label="业务负责人"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.business_director == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.business_director }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[3].istrue"
        class-name="status-col"
        prop="director_mobile"
        label="负责人联系电话"
        :show-overflow-tooltip="true"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.director_mobile == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.director_mobile }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[4].istrue"
        class-name="status-col"
        prop="engineering_cost"
        :show-overflow-tooltip="true"
        label="工程费用"
        width="400"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.engineering_cost == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.engineering_cost }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[5].istrue"
        class-name="status-col"
        prop="price_ceiling"
        label="最高限价"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.price_ceiling == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.price_ceiling }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[6].istrue"
        class-name="status-col"
        prop="price_tag"
        :show-overflow-tooltip="true"
        label="中标价"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.price_tag == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.price_tag }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[7].istrue"
        :show-overflow-tooltip="true"
        class-name="status-col"
        prop="business_type"
        label="业务类型"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.business_type == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.business_type }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[11].istrue"
        :show-overflow-tooltip="true"
        class-name="status-col"
        prop="tender_describe"
        label="投标描述"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.tender_describe == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.tender_describe }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[8].istrue"
        min-width="150px"
        label="投标信息操作人"
        prop="write_tender"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.write_tender == null">
            投标中
          </span>
          <span v-else>
            {{ scope.row.write_tender }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="colData[11].istrue"
        :show-overflow-tooltip="true"
        class-name="status-col"
        prop="signing_describe"
        label="签约描述"
        width="150"
      >
        <template slot-scope="scope">
          <span v-show="scope.row.signing_describe == null">
            投标中
          </span>
          <span v-show="scope.row.signing_describe == ''">
            签约中
          </span>
          <span v-show="scope.row.signing_describe !== null">
            {{ scope.row.signing_describe }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="colData[9].istrue"
        width="150px"
        label="签约信息操作人"
        :show-overflow-tooltip="true"
        prop="write_signing"
        align="center"
      >
        <template slot-scope="scope">
          <span v-show="scope.row.write_signing == null">
            投标中
          </span>
          <span v-show="scope.row.write_signing == ''">
            签约中
          </span>
          <span v-show="scope.row.write_signing !== null">
            {{ scope.row.write_signing }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="colData[10].istrue"
        align="center"
        prop="project_status"
        label="项目状态"
        width="120"
      >
        <template slot-scope="scope">
          <span
            v-show="scope.row.project_status == 3"
            style="color:red;font: 13px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;letter-spacing: 1px;"
          >投标中</span>
          <span
            v-show="scope.row.project_status == 4"
            style="color:red;font: 13px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;letter-spacing: 1px;"
          >签约中</span>
          <span
            v-show="scope.row.project_status == 5"
            style="color:#1890ff;font: 13px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;letter-spacing: 1px;"
          >已完成</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            v-show="
              scope.row.project_status == 3 || scope.row.project_status == 4
            "
            type="text"
            size="small"
            @click="btnBidMessage(scope.row.project_status, scope.row.id)"
          >投标信息</el-button>
          <el-button
            v-show="
              scope.row.project_status == 3 || scope.row.project_status == 4
            "
            type="text"
            size="small"
            style="margin-left:15px;"
            @click="SignMessage(scope.row.project_status, scope.row.id)"
          >签约信息</el-button>
          <router-link
            v-show="scope.row.project_status == 5"
            :to="'/branch/ProjectMessage/' + scope.row.id"
          >
            <el-button type="text" size="small">查看项目信息</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        ref="pager1"
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>

<script>
import { getProject, getProjectPage } from '@/api/project'
import { getInfo } from '@/api/user'
import { branchGetProject } from '@/api/project'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      projectList: [],
      projectStatus: '全部', // 筛选框model  项目状态
      username: '', // 当前登录用户姓名
      userPermissions: [], // 当前登录用户权限数组
      is_opinion: false, // 科员审核意见input框是否显示
      is_show: false, // 控制 项目编辑按钮显示隐藏 只有 分公司才能修改项目
      dialogVisible: false, // dialog 显示隐藏
      dialogType: '', // dialog标题
      projectListId: '', // 存放点击当前行的项目id
      total: 0,
      pageIndex: 1,
      pageSize: 2,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      options: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '投标中',
          label: '投标中'
        },
        {
          value: '签约中',
          label: '签约中'
        }
      ],
      colData: [
        // { title: "ID", istrue: true },
        { title: '项目名称', istrue: true },
        { title: '开标时间', istrue: true },
        { title: '业务负责人', istrue: true },
        { title: '负责人联系电话', istrue: true },
        { title: '工程费用', istrue: true },
        { title: '最高限价', istrue: true },
        { title: '中标价', istrue: true },
        { title: '业务类型', istrue: true },
        { title: '投标信息操作人', istrue: true },
        { title: '签约信息操作人', istrue: true },
        { title: '项目状态', istrue: true },
        { title: '投标描述', istrue: true },
        { title: '签约描述', istrue: true }
      ],
      colOptions: [
        // "ID",
        '项目名称',
        '开标时间',
        '业务负责人',
        '负责人联系电话',
        '工程费用',
        '最高限价',
        '中标价',
        '业务类型',
        '投标信息操作人',
        '签约信息操作人',
        '项目状态',
        '投标描述',
        '签约描述'
      ], // 默认全选
      colSelect: [
        // "ID",
        '项目名称',
        '开标时间',
        '业务负责人',
        '负责人联系电话',
        '工程费用',
        '最高限价',
        '中标价',
        '业务类型',
        '投标信息操作人',
        '签约信息操作人',
        '项目状态',
        '投标描述',
        '签约描述'
      ]
    }
  },
  beforeCreated() {},
  // 表格title 显示隐藏
  watch: {
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0) // 未选中
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout()
          })
        } else {
          i.istrue = true
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout()
          })
        }
      })
    }
  },
  created() {
    this.getProjectList()
    this.getUserInfo()
  },
  mounted() {
    // setTimeout(() => {
    //   this.listLoading = false;
    // }, 1000);
  },
  methods: {
    // 投标信息按钮
    btnBidMessage(value, id) {
      if (value == 4) {
        this.$confirm('当前项目已经填写投标信息,是否确认修改?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$router.push('/branch/BidMessage/' + id)
          })
          .catch(err => {
            // console.log(err);
          })
      }
      if (value == 3) {
        this.$router.push('/branch/BidMessage/' + id)
      }
    },
    // 签约信息按钮
    SignMessage(value, id) {
      if (value !== 4) {
        this.$message({
          type: 'info',
          message: '当前项目还没填写投标信息!'
        })
      } else {
        this.$router.push('/branch/SignedMessage/' + id)
      }
    },

    // 点击 x关闭审核对话框 ,清除表单内容
    closeAuditFrom(done) {
      this.auditFrom.clerkText = ''
      this.auditFrom.status = ''
      this.auditFrom.text = ''
      done()
    },
    // 点击 x 关闭评价对话框 清除表单输入内容
    closeEvaluationFrom(done) {
      this.evaluationFrom.text = ''
      done()
    },

    // 清除表单和关闭dialog对话框
    clearFrom() {
      this.dialogVisible = false // 关闭对话框
      this.auditFrom.status = '' // 清空dialog内表单
      this.auditFrom.text = '' // 清空dialog内表单
      this.auditFrom.clerkText = '' // 清空dialog内表单
      this.is_opinion = false // 将科员意见input 隐藏
    },

    // 下一页
    sizeChangeHandle: function(size) {
      this.pagesize = size
    },
    currentChangeHandle: function(val) {
      return new Promise((resolve, reject) => {
        getProjectPage(val).then(response => {
          this.projectList = response.data.data
        })
      })
    },

    // 获取项目信息
    getProjectList() {
      new Promise((resolve, reject) => {
        branchGetProject().then(response => {
          // console.log(response.data);
          this.projectList = response.data.data
          this.total = response.data.total
          this.pageSize = response.data.to
          // console.log(this.projectList);
        })
      })
    },

    // 获取当前用户的登录信息
    getUserInfo() {
      new Promise((resolve, reject) => {
        getInfo().then(response => {
          // console.log("info");
          // console.log(response.data);
          this.username = response.data.name // 当前登录用户的姓名
          this.userPermissions = response.data.per // 当前登录用户权限数组
          // console.log(this.userPermissions);
        })
      })
    }
  }
}
</script>

<style>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.evaluation_dialog .el-dialog__body {
  padding: 0px 20px 30px 20px;
}
.evaluation_text {
  display: flex;
  flex-direction: row;
}
.evaluation_dialog
  .el-dialog
  .el-dialog__body
  .el-scrollbar
  .el-scrollbar__wrap {
  overflow-x: hidden;
}
.evaluation_text {
  font-size: 18px;
}
.el-divider--horizontal {
  margin: 12px 0px;
}
</style>
